<html>
<head>
<title>User Interface App Example</title>
</head>
<body bottommargin="2" rightmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="font-family: Verdana, Arial;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="99.9%" height="100%">
<tr>
   <td height="100%" align="center" valign="top">
      <table border="0" cellpadding="2" cellspacing="0">
      <tr>
         <td colspan="2" style="font-size: 18pt;">User Interface App Example</td>
      </tr>
      <tr>
         <td colspan="2" style="font-size: 8pt;"><i>An embedded OpenGL plugin window that communicates with the Chromium browser control via JavaScript calls.</i>
         <a href="#" onclick="cef.uiapp.viewSource(); return false;">View Page Source</a></td>
      </tr>
      <tr>
         <td colspan="2" height="10"></td>
      </tr>
      <tr>
         <td width="100" valign="top"><img src="logoball.png" width="100" height="101"></td>
         <td style="font-size: 10pt;"><span style="font-size: 12pt;">You can make the square rotate!</span>
             <ul>
               <li>Click the square with the left mouse button or click the <b>Decrement Rotation</b> button to decrement the rotation value.</li>
               <li>Click the square with the right mouse button or click the <b>Increment Rotation</b> button to increment the rotation value.</li>
               <li>Click the <b>Reset Rotation</b> button to reset the rotation value to zero.</li>
             </ul>
          </td>
      </tr>
      </table>
      
      <div style="padding: 2px; margin: 5px; border: red 1px solid; width: 350px;">
      <embed type="application/x-client-ui-plugin" width=350 height=350></embed>
      </div>
      
      <form name="control">
      Rotation Value: <input type="text" name="rotation_field" value="0" size="5" readonly>
      <br/><input type="button" value="Decrement Rotation" onclick="cef.uiapp.modifyRotation(-2.0);">
      <input type="button" value="Increment Rotation" onclick="cef.uiapp.modifyRotation(2.0);">
      <input type="button" value="Reset Rotation" name="reset_button" onclick="cef.uiapp.resetRotation();" disabled>
      </form>
   </td>
</tr>
</table>
</div>
<script language="JavaScript">
// Called by the application after rotation has been changed.
// |val| is the new rotation value.
function notifyNewRotation(val)
{
   document.control.rotation_field.value = val;
   document.control.reset_button.disabled = (val == 0);
}
</script>
</body>
</html>
